<!--全国故障地图组件-->
<template>
  <el-card>
    <h3 slot="header">故障地图</h3>
      <div id="china_map_box" style="background-color: rgba(255,255,255,0);width:100%;height: 790px;">
        <div id="china_map"></div>
      </div>
  </el-card>
</template>

<script>
  import '/static/china.js'
  export default {
    name:"ChineseMap",
    data() {
      return {
        chartoption:{},
        /*地图测试用数据*/
        chartData:[{
          'name': '北京',
          'value':50,
          'onlineNum':500,
          'faultNum':200,
        }, {
          'name': '上海',
          'value':35,
          'onlineNum':4000,
          'faultNum':20000,
        }, {
          'name': '黑龙江',
          'value':6,
          'onlineNum':456,
          'faultNum':652,
        }, {
          'name': '新疆',
          'value':42,
          'onlineNum':500,
          'faultNum':200,
        }, {
          'name': '湖北',
          'value':21,
          'onlineNum':500,
          'faultNum':200,
        }, {
          'name': '四川',
          'value':15,
          'onlineNum':500,
          'faultNum':200,
        },{
          'name': '河北',
          'value':82,
          'onlineNum':500,
          'faultNum':200,
        },{
          'name': '内蒙古',
          'value':35,
          'onlineNum':500,
          'faultNum':200,
        },{
          'name': '广西',
          'value':6,
          'onlineNum':500,
          'faultNum':200,
        },{
          'name': '甘肃',
          'value':45,
          'onlineNum':500,
          'faultNum':200,
        },{
          'name': '西藏',
          'value':66,
          'onlineNum':500,
          'faultNum':200,
        },{
          'name': '青海',
          'value':29,
          'onlineNum':500,
          'faultNum':200,
        }],

      }
    },
    methods: {
      echartInit(){
        this.chartOption = {
          tooltip: { // 鼠标移到图里面的浮动提示框
            // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
            formatter (params, ticket, callback) {
              // params.data 就是series配置项中的data数据遍历
              let onlineNum,
                faultNum
              if (params.data) {
                onlineNum = params.data.onlineNum
                faultNum = params.data.faultNum

              } else { // 为了防止没有定义数据的时候报错写的
                  onlineNum=0,
                  faultNum=0
              }
              let htmlStr = `
  <div style='font-size:18px;'> ${params.name}</div>
  <p style='text-align:left;margin-top:-10px;'>
   在线车辆数：${onlineNum}<br/>
   故障车辆数：${faultNum}<br/>
  </p >
`
              return htmlStr
            }
            // backgroundColor:"#ff7f50",//提示标签背景颜色
            // textStyle:{color:"#fff"} //提示标签字体颜色
          },
          // visualMap的详细配置解析：https://echarts.baidu.com/option.html#visualMap
          visualMap: { // 左下角的颜色区域
            type: 'piecewise', // 定义为分段型 visualMap
            min: 0,
            max: 1000,
            itemWidth: 40,
            bottom: 60,
            left: 20,
            pieces: [ // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
              {gt: 80, lte: 1000, label: '80-100', color: '#003a8c'}, // (900, 1000]
              {gt: 60, lte: 80, label: '60-80', color: '#096dd9'}, // (500, 900]
              {gt: 40, lte: 60, label: '40-60', color: '#40a9ff'}, // (310, 500]
              {gt: 20, lte: 40, label: '20-40', color: '#91d5ff'}, // (200, 300]
              {gt: 0, lte: 20, label: '0-20', color: '#bae7ff'}, // (10, 200]
            ]
          },
          geo: { // 地理坐标系组件用于地图的绘制
            map: 'china', // 表示中国地图
            roam: true, // 是否开启鼠标缩放和平移漫游
            zoom: 2, // 当前视角的缩放比例（地图的放大比例）
            label: {
              show: true
            },
            itemStyle: { // 地图区域的多边形 图形样式。
              borderColor: 'rgba(0, 0, 0, 0.2)',
              emphasis: { // 高亮状态下的多边形和标签样式
                shadowBlur: 20,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [
            {
              name: '', // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
              type: 'map',
              geoIndex: 0,
              roam: true,
              label: {
                show: true
              },
              // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）
              data: this.chartData,
            }
          ]
        }
        let myChart = this.$echarts.init(document.getElementById('china_map'));
        myChart.setOption(this.chartOption)
      }
    },
    mounted() {
      this.echartInit()
    }
  };
</script>

<style scoped>

  #china_map_box #china_map{
    height: 100%;
    width: 100%;
  }

</style>
